@import 'steps';

@import 'git';
@import 'github';
@import 'github-enterprise';


.create-pipeline {
    .ContentPageHeader-main {
        justify-content: space-between;

        .classic-link {
            display: flex;
            align-items: center;

            .svg-icon {
                fill: #fff;
                margin-right: 8px;
            }
        }
    }

    .content-area {
        padding: 48px 0 0 0;
        width: 540px;
    }

    .scm-provider-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;

        .provider-button {
            .IconButton {
                padding: 15px;
                margin-bottom: 10px;
                min-width: 220px;
                height: 56px;
                opacity: 0.75;

                &:hover {
                    background-color: rgba(74,144,226,0.04);
                    opacity: 1;
                }

                &.active {
                    opacity: 1;
                }
            }

            &:last-child .IconButton {
                margin-right: 0;
            }
        }
    }

    .creation-steps .last-step {
        margin-bottom: 100px;
    }
}


.Button {
    min-width: 90px;
    position: relative;


    &.Button-status {
        .Button-text {
            visibility: hidden;
        }

        .Button-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -8px;
            margin-left: -8px;

            transition: opacity linear 0.25s;
            transition-delay: 2s;

            .svgResultStatus {
                vertical-align: text-bottom;
            }

            .progress-spinner.running.spin .running {
                stroke: #fff;
            }

            .success {
                fill: none;
            }
        }
    }

    .Button-icon {
        opacity: 1;
    }

    &.Button-transitioning .Button-icon {
        opacity: 0.01;
    }
}

.creation-selected-server-url {
    font-style: italic;
}



// from the JDL
@brand-primary:         #4A90E2;

.provider-button button.active {
    border-color: @brand-primary;
    background-color: lighten(@brand-primary, 37.5%);

    path {
        fill: #4C4C4C;
    }
}
